import { Layout,Menu,Input,Select,Button,Table,Tag,Space } from 'antd';
import './index.less';
import Head from '../../components/header';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import { useEffect, useState,useRef } from 'react';
import ModalA from '../deviceManege/ModalA'
import ModalB from '../deviceManege/ModalB'
import ModalC from '../deviceManege/ModalC'
const { Header, Footer, Sider, Content } = Layout;
const { SubMenu } = Menu;
const { Option } = Select;


//这里是表格内的数据
const data = [
  {
    key: '1',
    time: '2012-11-11 13:01:01',
    num: 'ZD0024',
    name: 'cjr设备24',
    mac: '6C:3E:6D:2B:54:34',
    where:1,
    movestate:'正常',
    state:'已绑定'
  },
  {
    key: '2',
    time: '2013-12-11 5:01:01',
    num: 'ZD1111',
    name: 'cjr设备11',
    mac: '6C:3E:6D:2B:54:34',
    where:1,
    movestate:'正常',
    state:'已绑定'
  }
  
  
];


function DeviceManege(){

  const childRef = useRef();
  const handleClick = () => {
		if(childRef){
			childRef.current.showModal() // 调用子组件方法
		}
	}
  
  const [select,setSelect]=useState([])
  const columns = [
    {
      title: '创建时间',
      dataIndex: 'time',
      key: 'time',
      width:180,
      
    },
    {
      title: '设备编号',
      dataIndex: 'num',
      key: 'num',
    },
    {
      title: '设备名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'MAC地址',
      dataIndex: 'mac',
      key: 'mac',
    },
    {
      title: '设备位置',
      dataIndex: 'where',
      key: 'where',
    },
    {
      title: '运行状态',
      dataIndex: 'movestate',
      key: 'movestate',
    },
    {
      title: '状态',
      dataIndex: 'state',
      key: 'state',
    },
    {
      
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          
          <ModalA data={select} />
          <ModalB childRef={childRef}/>
          <ModalC/>
         
        </Space>
      ),
    },
  ];
     return (
       <div className="deviceBox">
        <Layout>
      <Head/>
      <Layout>
      <Sider>
      <Menu
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          mode="inline"
          theme="dark"
          
        >
          <Menu.Item key="1" >
           设备管理
          </Menu.Item>
          </Menu> 
        </Sider>
        <Content>
          <div className="text1">设备管理</div>
          <div className="contHeadBox">
                    <div className="numInp">
                    <span>编号</span>
                    <Input placeholder="请输入编号" />
                    </div>

                    <div className="nameInp">
                    <span>名称</span>
                    <Input placeholder="请输入名称" />
                    </div>
                    
                    <div className="selectInp">
                    <span >状态</span>
                    <Select
                      placeholder="请选择状态"
                      allowClear
                    >
                      <Option value="male">禁用</Option>
                      <Option value="female">启用</Option>
                      
                    </Select>
                    </div>

                    <div className="headbtn">
                    <Button type="primary">筛选</Button>
                    </div>

                    <div className="headadd">
                    <Button type="primary" onClick={handleClick}>添加</Button>
                    </div>
          </div>
          
          <div className="tablebox">
              <Table   columns={columns} dataSource={data} 
              onRow={(record, rowIndex) => {
                return {
                  onClick: event => {
                    setSelect(record);
                  }, // click row
                  onDoubleClick: event => {}, // double click row
                  onContextMenu: event => {}, // right button click row
                  onMouseEnter: event => {}, // mouse enter row
                  onMouseLeave: event => {}, // mouse leave row
                };
              }}/>
          </div>
        </Content>
      </Layout>
     
        </Layout>
        </div>
    )
}
export default DeviceManege;